{% extends 'surveillanceapp/base.html' %}
{% load static %}

{% block extracss %}
    <style>
        .vehicle-img{
            width: 152px;
            height: 152px;
            display: block;
        }
        .vehicle-block{
            border-width: 5px;
            border-style: solid;
            border-color: #394a59;
            margin-left: 1%;
            margin-right: 1%;
            text-align: center;
            display: inline-block;
        }
        .vehicle-block p{
            font-size: 150%;
            color: #394a59;
        }
        .outgoing-count{
            font-weight: bold;
            font-size: 200%;
            margin-top: -2%;
            color: #394A59;
        }
        .btn{
            padding-top: 2% !important;
            padding-bottom: 2% !important;
        }
        .btn-text{
            font-size: 150%;
            font-weight: bold;
        }

    </style>
{% endblock %}

{% block extraheadjs %}
    <script src="{% static 'js/highcharts.js' %}"></script>
{% endblock %}

{% block main-content %}
    <div class="row">
        <div class="col-lg-8">
            <ol class="breadcrumb" style="margin-bottom: 0%;">
              <li><i class="fa fa-home"></i><a href="{% url 'surveillanceapp:index' %}">Home</a></li>
                <li><i class="fas fa-map-marked-alt"></i><a href="{% url 'surveillanceapp:stationlist' %}">Stations</a></li>
                <li><i class="fas fa-map-marker-alt"></i><a href="{% url 'surveillanceapp:stationdetails' report.video.station.station_id %}">{{ report.video.station.station_name }}</a></li>
                <li><i class="fas fa-camera"></i><a href="{% url 'surveillanceapp:video' report.video.station.station_id report.video.video_id %}">Video</a></li>
              <li><i class="fas fa-chart-bar"></i>Analysis Report</li>
            </ol>
        </div>
        <div class="col-lg-2">
            <a id="replay-btn" href="{% url 'surveillanceapp:video' report.video.station.station_id report.video.video_id %}" class="btn btn-block btn-primary">
                <span class="fas fa-play-circle fa-2x" style="margin-right: 6%;"> </span> <span class="btn-text"> Re-analyze Video</span>
            </a>
        </div>
        <div class="col-lg-2">
            <a id="export-pdf" href="{% static report.report_file %}" target="_blank" class="btn btn-block btn-danger">
                <span class="fas fa-file-pdf fa-2x" style="margin-right: 6%;"> </span> <span class="btn-text"> Export to PDF</span>
            </a>
        </div>
    </div>
    <div class="row" style="margin-top: 1%">
        <div class="col-lg-12">
            <section class="panel panel-default">
              <div class="panel-heading">
                  Report
              </div>
            <div class="panel-body">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#voverview" data-target="#voverview" data-toggle="tab">Overview</a>
                    </li>
                    <li><a href="#vcount" data-target="#vcount" data-toggle="tab">Count Graphs</a>
                    </li>
                    <li><a href="#vcongestion" data-toggle="tab" data-target="#vcongestion">Congestion Graphs</a>
                    </li>
                    <li><a href="#vcontribution" data-toggle="tab" data-target="#vcontribution">Congestion Contribution Chart</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active fade in" id="voverview">
                        <div class="row" style="margin-top: 2%; padding-left: 4%; padding-right: 3%">
                            <div style="font-size: 150%">
                                This surveillance report for <strong>{{ report.video.station.station_name }}</strong> station has been generated by the analysis of <strong>{{ report.video.analysed_percentage }}%</strong> of the video.
                            </div>
                        </div>
                        <div id="vehicle-wrapper" class="row" style="margin-top: 2%;">
                            <p style="font-size: 150%; padding-left: 4%">Total number of outgoing vehicles during this period:</p>
                            <div class="col-lg-12" style="text-align: center;">
                                <div class="vehicle-block">
                                    <img src="{% static 'img/tempo.png' %}" class="vehicle-img">
                                    <p>Tempo</p>
                                    <h2 class="outgoing-count" data-vclass="Tempo">{{ report.outgoing_tempo_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/bike.png' %}" class="vehicle-img">
                                    <p>Bike</p>
                                    <h2 class="outgoing-count" data-vclass="Bike">{{ report.outgoing_bike_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/car.png' %}" class="vehicle-img">
                                    <p>Car</p>
                                    <h2 class="outgoing-count" data-vclass="Car">{{ report.outgoing_car_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/taxi.png' %}" class="vehicle-img">
                                    <p>Taxi</p>
                                    <h2 class="outgoing-count" data-vclass="Taxi">{{ report.outgoing_taxi_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/micro.png' %}" class="vehicle-img">
                                    <p>Micro</p>
                                    <h2 class="outgoing-count" data-vclass="Micro">{{ report.outgoing_micro_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/pickup.png' %}" class="vehicle-img">
                                    <p>Pickup</p>
                                    <h2 class="outgoing-count" data-vclass="Pickup">{{ report.outgoing_pickup_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/bus.png' %}" class="vehicle-img">
                                    <p>Bus</p>
                                    <h2 class="outgoing-count" data-vclass="Bus">{{ report.outgoing_bus_count }}</h2>
                                </div>
                                <div class="vehicle-block">
                                    <img src="{% static 'img/truck.png' %}" class="vehicle-img">
                                    <p>Truck</p>
                                    <h2 class="outgoing-count" data-vclass="Truck">{{ report.outgoing_truck_count }}</h2>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 2%; padding-left: 3%; padding-right: 3%">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <i class="fa fa-info-circle"></i> Overall Summary
                                </div>
                                <div class="panel-body">
                                    <div style="font-size: 150%">
                                        <p>Total number of outgoing vehicles:   {{ report.outgoing_vehicle_count }}</p>
                                        <p>Average congestion index over the entire duration:    {{ report.avg_congestion_index|floatformat:2 }}</p>
                                        <p>Average number of vehicles in the road at a time:  {{ report.avg_count_index|floatformat:2 }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="tab-pane" id="vcount">
                        <div class="col-lg-12 col-md-12">
                         {% for vehicle in vclass_names %}
                             <div class="col-lg-6 panel panel-primary">
                                  <div class="panel-body" id="{{ vehicle }}count-graph"></div>
                             </div>
                         {% endfor %}
                        </div>
                    </div>

                    <div class="tab-pane col-lg-12" id="vcongestion">
                        <div class="col-lg-12 panel panel-primary">
                              <div class="panel-body" id="congest-graph"></div>
                        </div>
                        <div class="col-lg-12 panel panel-primary">
                              <div class="panel-body" id="congest-rollgraph"></div>
                        </div>
                        <div class="col-lg-12 panel panel-primary">
                              <div class="panel-body" id="totcount-graph"></div>
                        </div>
                        <div class="col-lg-12 panel panel-primary">
                              <div class="panel-body" id="totcount-rollgraph"></div>
                        </div>
                    </div>

                    <div class="tab-pane col-lg-12" id="vcontribution">
                        <div class="col-lg-12 panel panel-primary">
                              <div class="panel-body center-block" id="contrib-graph"></div>
                        </div>
                    </div>
                 </div>

             </div>
            </section>
    </div>
    </div>
{% endblock %}

{% block extrajs %}
    <script>
        {% for chart in count_chart %}
            Highcharts.chart("{{ chart.class_name }}count-graph", {{ chart.chart|safe }});
        {% endfor %}

        Highcharts.chart('totcount-graph', {{ totalcount_chart|safe }});
        Highcharts.chart('totcount-rollgraph', {{ totalcount_roll_chart|safe }});

        Highcharts.chart('congest-graph', {{ congest_chart|safe }});
        Highcharts.chart('congest-rollgraph', {{ congest_roll_chart|safe }});

        Highcharts.chart('contrib-graph', {{ contrib_chart|safe }});

    </script>
{% endblock %}